Vue.component("basic_question", {
	props: ["parent_data"],
	template: '<form class="form-horizontal base_quest">\
				<div v-for="(item,index) in questions">\
					<!--文本框-->\
					<div class="form-group" v-if="item.ControlType==1 && !item.AfterTitle">\
						<label for="" class="col-sm-3 control-label">{{item.QuestionTitle}}</label>\
						<div class="col-sm-6">\
							<input type="text" class="form-control" v-bind:name="\'_\'+item.ID" v-model="answer_items[index].AnswerValue" v-bind:placeholder="item.PlaceHolder">\
						</div>\
					</div>\
					<!--工作年限-->\
					<div class="form-group" v-if="item.ControlType==1 && item.AfterTitle">\
						<label for="inputEmail3" class="col-sm-3 control-label">{{item.QuestionTitle}}</label>\
						<div class="col-sm-6" style="padding-right: 30px;">\
							<input type="number" class="form-control" v-bind:name="\'_\'+item.ID" v-model="answer_items[index].AnswerValue" v-bind:placeholder="item.PlaceHolder">\
							<span style="position: absolute;right: 10px;top: 10px;">{{item.AfterTitle}}</span>\
						</div>\
					</div>\
					<!--下拉框-->\
					<div class="form-group" v-if="item.ControlType==2">\
						<label for="inputEmail3" class="col-sm-3 control-label">{{item.QuestionTitle}}</label>\
						<div class="col-sm-6">\
							<select class="form-control" v-bind:name="\'_\'+item.ID" v-model="answer_items[index].AnswerID">\
								<option value="">-未选择-</option>\
								<option v-for="value in item.AnswerOutputs" v-bind:value="value.ID">{{value.AnswerItem}}</option>\
							</select>\
						</div>\
					</div>\
					<!--单选-->\
					<div class="form-group" v-if="item.ControlType==3">\
						<label for="inputEmail3" class="col-sm-3 control-label">{{item.QuestionTitle}}</label>\
						<div class="col-sm-6">\
							<label class="radio-inline"  v-for="(op,i) in item.AnswerOutputs">\
							  <input type="radio" v-bind:name="\'_\'+item.ID" v-model="answer_items[index].AnswerID" v-bind:value="op.ID"> {{op.AnswerItem}}\
							</label>\
						</div>\
					</div>\
					<!--有无子女-->\
					<div class="form-group child" v-if="item.ControlType==5">\
						<label for="inputEmail3" class="col-sm-3 control-label">{{item.QuestionTitle}}</label>\
						<div class="col-sm-6">\
							<label class="radio-inline">\
							  <input type="radio"  v-model="answers.hasChild" value=""> 有\
							</label>\
							<label class="radio-inline">\
							  <input type="radio"  v-model="answers.hasChild" v-bind:value="item.AnswerOutputs[0].ID"> 无\
							</label>\
							<div class="clear" style="height: 10px;"></div>\
							<div class="child_num" v-if="answers.hasChild == \'\'">\
								<input type="number" class="form-control" v-model="answers.male" placeholder="">\
								<span>男</span>\
								<input type="number" class="form-control" v-model="answers.female" placeholder="">\
								<span>女</span>\
							</div>\
						</div>\
					</div>\
					<!--出生时间-->\
					<div class="form-group" v-if="item.ControlType==6">\
						<label for="inputEmail3" class="col-sm-3 control-label">{{item.QuestionTitle}}</label>\
						<div class="col-sm-6">\
							<div class="input-group date form_date col-sm-12" data-date=""  data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">\
								<input class="form-control" size="16" type="text" id="dtp_input2" value="" readonly>\
				                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>\
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>\
							<!--<input type="text" class="form-control" name="birthday" v-model="answers.birthday" v-bind:placeholder="item.PlaceHolder">-->\
							</div>\
							<input type="hidden" name="birthday"  value="" /><br/>\
						</div>\
					</div>\
				</div>\
				<div class="form-group">\
					<div class="col-sm-offset-3 col-sm-6">\
						<button type="button" class="btn btn-base" @click="go_question_step2">下一步</button>\
					</div>\
				</div>\
			</form>',
	data: function () {
		return {
			questions: [],
			url: {
				getBasicQuestions: '/api/QuestionView/ViewBasicQuestions', //获取基本问题
				getBasicQuestionsAnswer: '/api/QuestionView/GetBasicQA', //获取基本问题答案
				saveBasicQuestions: '/api/QuestionView/SaveBasicQuestionAnswers', //保存基本问题
			},
			answer_items: [],
			answers: {
				hasChild: '',
				male: '',
				female: ''
			},
		}
	},
	computed: {
		childs: function () {
			return (this.answers.male + ',' + this.answers.female)
		}
	},
	mounted: function () {
		var that = this 
		this.getBasicQuestion()
		globalData.utils.scrool_top()
		setTimeout(function(){ 
		},2000)
	},
	methods: {
		//获取基本问题答案
		getBasicQuestionsAnswers: function () {
			var that = this;
			var data = { CustomerID: that.parent_data.CustomerID };	
			globalData.ajaxPost(that.url.getBasicQuestionsAnswer, data, function (res) {
				if (res.suc) { 
					$(that.questions).each(function (index, item) {
						that.answer_items[index].UserID = globalData.userInfo.UserID;
						$(res.data.UserAnswers).each(function (j, ua) {
							if (item.ID == ua.QuestionID) {
								var obj = {
									UserID: globalData.userInfo.UserID,
									QuestionID: that.answer_items[index].QuestionID,
									AnswerID: ua.AnswerID,
									CustomerID: that.parent_data.CustomerID,
									AnswerValue: ua.AnswerValue,
								}
								//判断是否是出生时间
								if(item.ID == "9"){
									$("#dtp_input2").val(ua.AnswerValue.split(" ")[0])
								}
								//是否有无子女
								if(item.ID == "056306576c774538bc3732de2f4aaf9b"){ 
									if(ua.AnswerID){
										that.answers.hasChild =  ua.AnswerID
									}else{
										var arr = ua.AnswerValue.split(",")
										that.answers.male  = arr[0]
										that.answers.female = arr[1]
									}
								}
								that.answer_items.splice(index,1,obj) 
								return false;
							}
						});
					});
				}
				
			});
		},
		getBasicQuestion: function () { //获取基本问题
			var that = this;			
			globalData.ajaxPost(this.url.getBasicQuestions, null, function (res) {
				if (res.suc) { 
					var userId=globalData.userInfo.UserID;
					that.answer_items = [] 
					$(res.data).each(function (i, item) {
						var itemAnswer = {};
						itemAnswer.UserID=userId;
						if(item.ControlType==3){
							itemAnswer.AnswerID= item.AnswerOutputs[0].ID;
						}else{
							itemAnswer.AnswerID= "";
						}
						
						itemAnswer.CustomerID = that.parent_data.CustomerID;
						itemAnswer.QuestionID = item.ID;
						itemAnswer.AnswerValue = "";
						that.answer_items.push(itemAnswer);
					});
					
					that.questions = res.data;
					that.getBasicQuestionsAnswers();
				
					
					
				}
				setTimeout(function () {
					$('.form_date').datetimepicker({
						language: 'zh-CN',
						format: "yyyy-mm-dd",
						weekStart: 1,
						todayBtn: 1,
						autoclose: 1,
						todayHighlight: 1,
						startView: 2,
						minView: 2,
						forceParse: 0,
						pickerPosition: "bottom-left"
					}); 
					$('.base_quest').bootstrapValidator(that.reset_valid_json());
				}, 100)

			})
		},
		reset_valid_json: function () {
			var that = this
			var valid_json = {
				excluded: [':disabled'],
				feedbackIcons: {
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
				fields: {
				}
			}
			$.each(that.questions, function (index, item) {
				if (item.IsMust === null) {
					var name = "_" + item.ID
					var message = ""
					if (item.ControlType == 1) {
						message = item.QuestionTitle + '不能为空'
					} else if (item.ControlType == 2 || item.ControlType == 3) {
						message = "请选择" + item.QuestionTitle
					}
					valid_json.fields[name] = {
						validators: {
							notEmpty: {
								message: message
							}
						}
					}
				}
			})
			return valid_json;
		},
		go_question_step2: function () {
			var that = this
			$('.base_quest').bootstrapValidator('validate'); 
			if (!$('.base_quest').data("bootstrapValidator").isValid()) {
				return;
			}

			//判断是否有子女
			if (this.answers.hasChild) {
				that.answer_items[8].AnswerID = that.answers.hasChild //有无子女
				that.answer_items[8].AnswerValue = ""
			} else {
				if (Number(that.answers.male)<1 && Number(that.answers.female)<1) {
					$("#alert").modal()
					$('#alert p').text("请填写子女数")
					return
				}
				that.answer_items[8].AnswerID = ""
				that.answer_items[8].AnswerValue = that.childs //有无子女 
			}
			//判断时间
			if (!$("#dtp_input2").val()) {
				$("#alert").modal()
				$('#alert p').text("请选择出生日期")
				return
			} else {
				that.answer_items[3].AnswerValue = $("#dtp_input2").val();//出生日期
			} 
			var age=that.getAge(that.answer_items[3].AnswerValue);
			//客户年龄
			globalData.setStorage("customerAge",age);
			//提交答案
			var data = {
				"ModelName": that.parent_data.ModelName,
				"UserAnswers": [{ "LoopTag": that.parent_data.LoopTag, "AnswerItems": that.answer_items }]
			}
			
			globalData.ajaxPost(that.url.saveBasicQuestions, data, function (res) {
				if (res.StatusCode == 200) {
					//保存成功，返回客户id
					that.parent_data.CustomerID = res.data; 
					//修改答题步骤
					that.parent_data.question_step = 2;
					globalData.utils.scrool_top();
				}
			})

		},
		getAge:function(birthday){
			var b=new Date(birthday);
			var today=new Date();
			return today.getFullYear()-b.getFullYear();
		}
	},
	filters: {
		trim: function (value) {
			return value.trim()
		}
	}
})

var base_quest = [{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
},
{
	"UserID": '',
	"QuestionID": '',
	"AnswerID": '',
	"CustomerID": '',
	"AnswerValue": ''
}
]

var valid_json = {
	feedbackIcons: {
		valid: 'glyphicon glyphicon-ok',
		invalid: 'glyphicon glyphicon-remove',
		validating: 'glyphicon glyphicon-refresh'
	},
	fields: {
		name: {
			validators: {
				notEmpty: {
					message: '用户名不能为空'
				}
			},
		},
		birthday: {
			validators: {
				notEmpty: {
					message: '请选择出生时间'
				}
			}
		},
		birthplace: {
			validators: {
				notEmpty: {
					message: '请选择出生地'
				}
			}
		},
		country: {
			validators: {
				notEmpty: {
					message: '请选择国籍'
				},
			}
		},
		address: {
			validators: {
				notEmpty: {
					message: '请选择居住地'
				}
			}
		},
		marriage: {
			validators: {
				notEmpty: {
					message: '请选择婚姻状况'
				},
				identical: {
					field: 'Password',
					message: "两次输入的密码不一致"
				}
			}
		},
		occupation: {
			validators: {
				notEmpty: {
					message: '请选择职业'
				},
				emailAddress: {
					message: '请输入正确的邮件地址如：123@qq.com'
				}
			}
		},
		workyear: {
			validators: {
				notEmpty: {
					message: '请填写工作年限'
				}
			}
		},
		industry: {
			validators: {
				notEmpty: {
					message: '请选择行业'
				}
			}
		},
		income: {
			validators: {
				notEmpty: {
					message: '请选择年收入'
				}
			}
		}
	}
}




Vue.component("step_bar", {
	props: ["parent_data"],
	template: '<div class="step_bar">\
					<div class="step">\
						<figure class="">\
						  <img src="imgs/intelligent_analysis/step_1.png" alt="img21"/>\
						  <figcaption>\
						      <p>基本</p>\
						  </figcaption>\
						</figure>\
					</div>\
					<div class="step">\
						<figure class="">\
						  <img src="imgs/intelligent_analysis/step_2.png" alt="img21"/>\
						  <figcaption>\
						      <p style="position: relative;left: 2px;"> 问答</p>\
						  </figcaption>\
						</figure>\
					</div>\
					<div class="step">\
						<figure class="">\
						  <img src="imgs/intelligent_analysis/step_3.png" alt="img21"/>\
						  <figcaption>\
						      <p>分析</p>\
						  </figcaption>\
						</figure>\
					</div>\
					<div class="clear"></div>\
					<div class="col">\
						<div v-bind:class="[{active:parent_data.question_step>0}]"></div>\
						<div v-bind:class="[{active:parent_data.question_step>1}]"></div>\
						<div v-bind:class="[{active:parent_data.question_step>2}]"></div>\
						<div class="bar"></div>\
					</div>\
				</div>',
	data: function () {
		return {

		}
	},
	computed: {

	},
	mounted: function () {

	}

})
















